<!--   @author  Created By  YS  on 2023/10/19 -->
<!--   @describe 用户主页-->

<template>
  <div class="body">
    <div class="card">
      <image class="head-img" src="../../assets/img/logo.png" alt=""></image>
      <div class="content">
        <div class="content-name">
          <text>River</text>
          <div class="content-vip">
            <image src="../../assets/icon/arrow-up-bold.png" alt=""></image>
            VIP
          </div>
        </div>
        <div class="content-info">
          <image src="../../assets/icon/arrow-up-bold.png" alt=""> </image>
          <text>24/155cm/50kg • 北京</text>
        </div>
      </div>
    </div>

    <div class="word-text">
      本人河南禹州88年身高170CM 体重53KG长相一般不丑不邋遢，本人河南禹州88年身高展开
    </div>
    <div>
      <u-tabs lineWidth="33.3" :itemStyle="itemStyles" :list="tabs" @click="click"></u-tabs>
    </div>
    <div>
      <u-empty mode="message" :icon="icon"></u-empty>
    </div>
    <div>
<!--      <view class="u-demo-block">-->
<!--        <view class="u-demo-block__content">-->
          <view class="album">
            <view class="album__avatar">
              <image :src="src"
                  mode=""
                  style="width: 32px;height: 32px;"
              ></image>
            </view>
            <view class="album__content">
              <u--text
                  text="uView UI"
                  type="primary"
                  bold
                  size="17"
              ></u--text>
              <u--text
                  margin="0 0 8px 0"
                  text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
              ></u--text>
              <u-album :urls="urls1" keyName="src2"></u-album>
            </view>
          </view>
          <view>

          </view>
<!--        </view>-->
<!--      </view>-->
    </div>
  </div>

</template>

<script>
export default {
  name: 'homePage',
  data() {
    return {
      tabs: [{
        name: '相册',
      }, {
        name: '动态',
      }, {
        name: '资料'
      }],
      itemStyles:{
        width: '33.3%',
        boxSizing: 'border-box',
      },
      icon:require('../../assets/icon/user-filling.png'),
      src:require('../../assets/img/logo.png'),
      albumWidth: 0,
      urls1:  [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ]
    }
  },
  methods: {
    click(index) {
      console.log(index)
    }
  }
}
</script>

<style lang='scss' scoped>
@import "../../assets/css/base.scss";
.word-text{
  width: 686rpx;
  height: 80rpx;
  opacity: 1;
  color: #919191;
  text-align: left;
  font-size: 28rpx;
  font-weight: 0;
  line-height: 40rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}
.album {
  @include flex;
  align-items: flex-start;

  &__avatar {
    background-color: $u-bg-color;
    padding: 5px;
    border-radius: 3px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}
</style>
